<template>
  <div class="enc" calstyle="margin: 12px 12px 0px">
    <head>
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
    </head>
    <body>


    <div class="container">
      <div class="card">
        <h3 class="title">订单数</h3>
        <div class="bar">
          <div class="emptybar"></div>
          <div class="filledbar">
<!--            <h3 class="title">订单总额</h3>-->
          </div>
        </div>
        <div class="circle">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
            <circle class="stroke" cx="60" cy="60" r="50"/>
          </svg>
          <el-col :span="10">
            <el-div class="filled titl">✪：{{salesAmount}}</el-div>
          </el-col>
        </div>
      </div>




      <div class="card">
        <h3 class="title">销售总额</h3>
        <div class="bar">
          <div class="emptybar"></div>
          <div class="filledbar">
<!--            <h3 class="title">订单总额</h3>-->
          </div>
        </div>
        <div class="circle">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
            <circle class="stroke" cx="60" cy="60" r="50"/>
          </svg>

          <el-col :span="10">
            <el-div class="filled titl">￥：{{salesAmount}}</el-div>
          </el-col>
        </div>
      </div>



      <div class="card">
        <h3 class="title">近7天销售金额</h3>
        <div class="bar">
          <div class="emptybar"></div>
          <div class="filledbar">
          </div>
        </div>
        <div class="circle">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
            <circle class="stroke" cx="60" cy="60" r="50"/>
          </svg>

          <el-col :span="10">
            <el-div class="filled titl">￥：{{salesAmount}}</el-div>
          </el-col>

        </div>

      </div>




      <div class="card">
        <h3 class="title">供应商数</h3>
        <div class="bar">
          <div class="emptybar"></div>
          <div class="filledbar">
<!--            <h3 class="title">订单总额</h3>-->
          </div>
        </div>
        <div class="circle">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
            <circle class="stroke" cx="60" cy="60" r="50"/>
          </svg>
          <el-col :span="10">
            <el-div class="filled titl">☎：{{salesAmount}}</el-div>
          </el-col>
        </div>
      </div>


      <div class="card">
        <h3 class="title">供应商数</h3>
        <div class="bar">
          <div class="emptybar"></div>
          <div class="filledbar">
            <!--            <h3 class="title">订单总额</h3>-->
          </div>
        </div>
        <div class="circle">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
            <circle class="stroke" cx="60" cy="60" r="50"/>
          </svg>
          <el-col :span="10">
            <el-div class="filled titl">☎：{{salesAmount}}</el-div>
          </el-col>
        </div>
      </div>



    </div>
    </body>







<!--    <el-container>-->
<!--      <el-aside width="25%">-->
<!--        <el-card class="box-card">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>订单数</span>-->
<!--&lt;!&ndash;            <el-button style="float: right; padding: 3px 0;background-color: #2d8cf0" type="text">操作按钮</el-button>&ndash;&gt;-->
<!--          </div>-->
<!--          <div  class="text item">-->
<!--            {{orderNumber}}-->
<!--          </div>-->
<!--        </el-card>-->

<!--      </el-aside>-->
<!--      <el-aside width="25%">-->
<!--        <el-card class="box-card">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>销售金额</span>-->
<!--&lt;!&ndash;            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>&ndash;&gt;-->
<!--          </div>-->
<!--          <div  class="text item">-->
<!--            {{salesAmount}}-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-aside>-->
<!--      <el-aside width="25%">-->
<!--        <el-card class="box-card">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>订单数</span>-->
<!--&lt;!&ndash;            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>&ndash;&gt;-->
<!--          </div>-->
<!--          <div  class="text item">-->
<!--            {{salesAmount}}-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-aside>-->
<!--      <el-aside width="25%">-->
<!--        <el-card class="box-card">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>供应商数</span>-->
<!--&lt;!&ndash;            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>&ndash;&gt;-->
<!--          </div>-->
<!--          <div  class="text item">-->
<!--            {{salesAmount}}-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-aside>-->

<!--    </el-container>-->
  </div>
</template>
<style>


.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}












body {
  background-color: slategrey;
  font-family: 'Open Sans', sans-serif;
}

.enc{
  background-color: slategrey;
}
.container {
  position: absolute;
  height:100%;
  width: 100%;
  top: 60px;
  left: calc(25% - 300px);
  display: flex;
}

.card {
  display: flex;
  height: 25%;
  width: 21.5%;
  background-color: #454B4D;
  border-radius: 10px;
  box-shadow: -1rem 0 3rem #454B4b;
  /*   margin-left: -50px; */
  transition: 0.4s ease-out;
  position: relative;
  left: 0px;
}

.card:not(:first-child) {
  margin-left: -50px;
}

.card:hover {
  transform: translateY(-20px);
  transition: 0.4s ease-out;
}

.card:hover ~ .card {
  position: relative;
  left: 50px;
  transition: 0.4s ease-out;
}

.title {
  color: gold;
  font-weight: 600;
  position: absolute;
  left: 20px;
  top: 15px;
}
.titl{
  color: gold;
  font-size: xx-large;
  font-weight: 600;
  position: absolute;
  left: 20px;
  top: 15px;
}


.bar {
  position: absolute;
  top: 100px;
  left: 20px;
  height: 5px;
  width: 150px;
}

.emptybar {
  background-color: #2e3033;
  width: 100%;
  height: 100%;
}

.filledbar {
  position: absolute;
  top: 0px;
  z-index: 3;
  width: 0px;
  height: 100%;
  background: rgb(0,154,217);
  background: linear-gradient(90deg, rgba(0,154,217,1) 0%, rgba(217,147,0,1) 65%, rgba(255,186,0,1) 100%);
  transition: 0.6s ease-out;
}


.filled {
  position: absolute;
  left: -25%;
  top: 30%;
  z-index: 3;
  width: 60%;
  height:25%;
  background-color: #454B4D;
}


.card:hover .filledbar {
  width: 120px;
  transition: 0.4s ease-out;
}

.circle {
  position: absolute;
  top: 50%;
  left: calc(50% - 60px);
}

.stroke {
  stroke:#454B4B;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  transition: 0.6s ease-out;
}

svg {
  fill: #454B4D;
  stroke-width: 2px;
}

.card:hover .stroke {
  stroke-dashoffset: 100;
  transition: 0.6s ease-out;
}





</style>
<script>
export default {
  data () {
    return {
      orderNumber:0,
      salesAmount:0,
      dataList:[]
    }
  },
  activated () {
    this.getOderNumber()
  },
  methods: {
    getOderNumber ()
    {
      this.$http({
        url: this.$http.adornUrl('/order/order/page'),
        method: 'get',
        params: this.$http.adornParams(
            Object.assign(
                {}, {}
            ), false
        )
      }).then(({ data }) => {
        console.log("result:==============>>"+data.records.length);
        this.orderNumber=data.records.length;
        this.dataList = data.records
        let element
        for(element of this.dataList)
        {
          this.salesAmount=this.salesAmount+element.actualTotal
        }

        console.log("zongzhi"+this.salesAmount)
      })
    }
  }
}



</script>
